<template>
  <div class="analysis">
    <a-row style="margin-top: 0" :gutter="[24, 24]">
      <a-col class="padding-vertical" :sm="24" :md="24" :xl="12" :xxl="6" @click="$router.push({path: '/device/terminal', query: {status: '2'}})">
        <chart-card :loading="loading" :title="`播放终端数量`" :backgroundColor="`#70d258`" :total="form.playingTerminalCount">
          <a-icon slot="icon" type="play-circle" />
        <a-tooltip :title="$t('introduce')" slot="action">
            <a-icon type="info-circle-o" /> 
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col class="padding-vertical" :sm="24" :md="24" :xl="12" :xxl="6" @click="$router.push({path: '/device/terminal', query: {status: '1'}})">
        <chart-card :loading="loading" :title="`停止终端数量`" :backgroundColor="`#f35656`" :total="form.stoppingTerminalCount">
          <a-icon slot="icon" type="pause-circle" />
        <a-tooltip :title="$t('introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card> 
      </a-col>
      <a-col class="padding-vertical" :sm="24" :md="24" :xl="12" :xxl="6" @click="$router.push({path: '/device/terminal', query: {status: '0'}})">
        <chart-card :loading="loading" :title="`离线终端数量`" :backgroundColor="`#92aac3`" :total="form.offlineTerminalCount">
          <a-icon slot="icon" type="close-circle" />
        <a-tooltip :title="$t('introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
      <a-col class="padding-vertical" :sm="24" :md="24" :xl="12" :xxl="6" @click="$router.push({path: '/device/terminal', query: {status: '3'}})">
        <chart-card :loading="loading" :title="`多日离线数量`" :backgroundColor="`#b796d3`" :total="form.moreDayOfflineTerminalCount">
          <a-icon slot="icon" type="warning" />
        <a-tooltip :title="$t('introduce')" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
        </chart-card>
      </a-col>
    </a-row>
    <a-row style="margin: 0 -12px">
      <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :loading="loading" :bordered="false" style="margin-top: 24px;" :title="`终端连接情况`" > 
          <bar :data="form.terminalConnectArray" title="终端连接情况" :id="'terminalEcharts'" :label="dict.terminalStatus" :color="terminalEchartsColor"/>
        </a-card>
      </a-col>
      <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :loading="loading" :bordered="false" style="margin-top: 24px;" :title="`终端连接情况`" > 
          <bar :data="form.terminalConnectArray" title="终端连接情况" :id="'terminalEcharts2'" :label="dict.terminalStatus" :color="terminalEchartsColor"/>
        </a-card>
      </a-col>
    </a-row>
    <a-row style="margin: 0 -12px">
      <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :loading="loading" :bordered="false" style="margin-top: 24px;" :title="`终端连接情况`" > 
          <bar :data="form.terminalConnectArray" title="终端连接情况" :id="'terminalEcharts3'" :label="dict.terminalStatus" :color="terminalEchartsColor"/>
        </a-card>
      </a-col>
      <a-col style="padding: 0 12px" :xl="12" :lg="24" :md="24" :sm="24" :xs="24">
        <a-card :loading="loading" :bordered="false" style="margin-top: 24px;" :title="`终端连接情况`" > 
          <bar :data="form.terminalConnectArray" title="终端连接情况" :id="'terminalEcharts4'" :label="dict.terminalStatus" :color="terminalEchartsColor"/>
        </a-card>
      </a-col>
    </a-row> 
  </div>
</template>

<script>
import ChartCard from '@/components/card/chart-card'
import Bar from '@/components/chart/bar'
import {consoleService} from '@/services'

export default {
  name: 'Console',
  i18n: require('./i18n'),
  components: {ChartCard, Bar},
  data () {
    return {
      loading: true,
      terminalEchartsColor: ["#70d258", "#f35656", "#92aac3", "#b796d3"],
      form: {
        playingTerminalCount: 0,
        stoppingTerminalCount: 0,
        offlineTerminalCount: 0,
        moreDayOfflineTerminalCount: 0,
        terminalConnectArray:[]
      },
      dict: {
        terminalStatus: []
      }
    }
  },
  methods: {
    loadStatisticsData() {
      this.loading = true
      consoleService.getStatisticsData().then(res => {
        const result = res.data
        if (result.code === 200) {
          this.form = result.data
          this.form.terminalConnectArray = [this.form.playingTerminalCount, this.form.stoppingTerminalCount, this.form.offlineTerminalCount, this.form.moreDayOfflineTerminalCount]
        }
      }).finally(this.loading = false)
    }
  },
  created() {
    this.getDict(JSON.stringify({code: 'TERMINAL_STATUS'})).then(res => {
      let terminalStatusArray = res.data.data
      this.dict.terminalStatus = terminalStatusArray.map(item => item.title)
    })
    this.loadStatisticsData()
  }
}
</script>

<style lang="less" scoped>
  .padding-vertical {
    padding-bottom: 0 !important;
  }
</style>
